* {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "STHeitiSC-Light", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

body,
html {
  width: 100%;
  height: 100%;
  /* padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); */
}

li {
  list-style: none
}

.hide {
  display: none
}

:global #main {
  width: 100%;
  height: 100%;
  position: relative;
}

/* APP 组件 */

.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  font-size: 32rpx;
}

.app {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #FEE233 ;
}

/* View组件 */

.view {
  overflow: hidden;
  user-select: none;
  box-sizing: border-box;
  position: relative;
  tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Text组件 */

.text {
  user-select: text !important;
}

/* Mask类下的 load组件 */

.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s
}

.maskHide {
  composes: mask;
  display: none;
}

.load {
  width: 240rpx;
  height: 240rpx;
  border-radius: 10rpx;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: -100rpx;
}

.loadIconPageSize {
  height: 120rpx;
  width: 120rpx;
  margin-top: 20rpx;
}

/* Icon类下的 loadIcon组件 */

.loadIcon {
  position: relative;
  transition: all 0.3s ease-in-out 0;
}

.loadIconItem1 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.loadIconItem2 {
  composes: loadIconItem1;
  transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg)
}

.loadIconItem3 {
  composes: loadIconItem1;
  transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg)
}

.loadIconItem4 {
  composes: loadIconItem1;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg)
}

.loadIconItem5 {
  composes: loadIconItem1;
  transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg)
}

.loadIconItem6 {
  composes: loadIconItem1;
  transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg)
}

.loadIconItem7 {
  composes: loadIconItem1;
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg)
}

.loadIconItem8 {
  composes: loadIconItem1;
  transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg)
}

.loadIconItem9 {
  composes: loadIconItem1;
  transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg)
}

.loadIconItem10 {
  composes: loadIconItem1;
  transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg)
}

.loadIconItem11 {
  composes: loadIconItem1;
  transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg)
}

.loadIconItem12 {
  composes: loadIconItem1;
  transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg)
}

@keyframes sk-circleFadeDelay {
  0%,
  39%,
  100% {
    opacity: 0
  }
  40% {
    opacity: 1
  }
}

.loadIconItem1::before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both
}

.loadIconItem2::before {
  animation-delay: -1.1s
}

.loadIconItem3::before {
  animation-delay: -1s
}

.loadIconItem4::before {
  animation-delay: -0.9s
}

.loadIconItem5::before {
  animation-delay: -0.8s
}

.loadIconItem6::before {
  animation-delay: -0.7s
}

.loadIconItem7::before {
  animation-delay: -0.6s
}

.loadIconItem8::before {
  animation-delay: -0.5s
}

.loadIconItem9::before {
  animation-delay: -0.4
}

.loadIconItem10::before {
  animation-delay: -0.3s
}

.loadIconItem11::before {
  animation-delay: -0.2s
}

.loadIconItem12::before {
  animation-delay: -0.1s
}

.loadText {
  color: #fff;
  font-size: 24rpx;
  margin-top: 25rpx;
}

/* scrollView组件 */

.scrollView {
  composes: view;
  width: 100%;
  height: 400rpx;
  background-color: #f1f1f1;
  transform: translate3d(0, 0, 0);
}

.scrollViewWrap {
  /* width: 100%;
  height: 100%; */
  overflow: hidden;
}

.scrollViewWrapRow {
  composes: scrollViewWrap;
  float: left;
  white-space: nowrap;
}

/* listView组件 */

.listView {
  padding-top: -20rpx;
}

.topRefreshControl {
  width: 100%;
  position: absolute;
  left: 0;
  transform: translate3d(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
}

.topRefreshControlBox {
  /* width: 200rpx; */
  padding: 0 20rpx;
  height: 100%;
  border-radius: 80rpx;
  color: #fff;
  justify-content: center;
  align-items: center;
  display: flex;
}

.topRefreshControlBoxText {
  font-size: 28rpx;
}

.topRefreshControlBoxIcon {
  width: 60rpx;
  height: 60rpx;
  overflow: hidden;
  margin-right: 10rpx;
}

.bottomRefreshControl {
  composes: view;
  width: 100%;
  height: 60rpx;
  margin: 30rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  color: #ccc;
  position: relative;
  /* background-color: #000; */
}

.bottomRefreshControlHide {
  composes: bottomRefreshControl;
  display: none
}

.toastBox {
  width: 100%;
  left: 0;
  bottom: -65rpx;
  height: 65rpx;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 200ms;
}

.toast {
  padding: 0 20rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15rpx;
  color: #fff;
  font-size: 30rpx;
}

.toastDark {
  composes: toast;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.toastLight {
  composes: toast;
  background-color: rgba(255, 255, 255, 0.5);
  color: #333;
}

.toastShow {
  transform: translate3d(0, -95rpx, 0);
}